<template>
    <l-layout class="l-tab-page" :right="500" >
        <l-panel style="padding-right:0;" >
            <template #title>
                <el-button-group>
                    <el-tooltip effect="dark" :content="$t('复原')" placement="bottom">
                        <el-button  size="mini" icon="el-icon-aim" @click="resetZoom"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="$t('放大')" placement="bottom">
                        <el-button  size="mini" icon="el-icon-zoom-in" @click="handlerZoom(0.1)"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="$t('缩小')" placement="bottom">
                        <el-button  size="mini" icon="el-icon-zoom-out" @click="handlerZoom(-0.1)"></el-button>
                    </el-tooltip>
                </el-button-group>
            </template>
            <b-wflow-viewer
                ref="bflow" 
                @elementClick="elementClick"
                >
            </b-wflow-viewer>
        </l-panel>
        <template #right>
            <l-panel style="padding-left:0;" >
                <div class="l-auto-window" >
                    <el-tabs v-model="configActiveName" :stretch="true" >
                        <el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
                            <component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
                        </el-tab-pane>
                        <el-tab-pane label="流程属性" name="tab02">
                            <shcemeinfo-config ref="shcemeinfo" :disabled="true" ></shcemeinfo-config>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </l-panel>
        </template>
    </l-layout>
</template>
<script>

import shcemeinfoConfig from './config/shcemeInfo'
import startEventOption from './config/startEvent'
import endEventOption from './config/endEvent'
import gatewayAndOption from './config/gatewayAnd'
import gatewayInclusiveOption from './config/gatewayInclusive'
import gatewayXorOption from './config/gatewayXor'
import scriptTaskOption from './config/scriptTask'
import subprocessOption from './config/subprocess'
import userTaskOption from './config/userTask'
import mylineOption from './config/myline'

export default {
    provide () {
        return {
            wfdesign: this
        };
    },
    components: {
        shcemeinfoConfig,

        startEventOption,
        endEventOption,
        gatewayAndOption,
        gatewayInclusiveOption,
        gatewayXorOption,
        scriptTaskOption,
        subprocessOption,
        userTaskOption,
        mylineOption
    },
    data(){
        return {
            configActiveName:'tab02',
            currentWfNode:undefined,
            wfNodeName:{
                startEvent:'开始节点',
                endEvent:'结束节点',
                gatewayAnd:'并行网关',
                gatewayInclusive:'包含网关',
                gatewayXor:'排他网关',
                scriptTask:'脚本节点',
                userTask:'审核节点',
                subprocess:'子流程',
                myline:'线条'
            },

        };
    },
    computed:{
    },
    created () {
    },
    methods:{
        resetZoom(){
            this.$refs.bflow.reset()
        },
        handlerZoom(r){
            this.$refs.bflow.handlerZoom(r)
        },
        elementClick(node){
            this.currentWfNode = node;
            if(node == undefined){
                this.configActiveName = 'tab02';  
            }
            else{
                if(node.type == 'myline'){
                    this.$nextTick(()=>{
                        this.$refs.wfcongfig && this.$refs.wfcongfig.getConditions()
                    })
                    
                }
                this.configActiveName = 'tab01';  
            }
        },
        handleGetWFData(){
            return this.$deepClone(this.$refs.bflow.getData());
        },


        resetForm(){
        },
        setForm({f_Content}){
            const scheme = JSON.parse(f_Content)

            let baseinfo = {
                undoType: scheme.undoType,
                undoDbCode: scheme.undoDbCode,
                undoDbSQL: scheme.undoDbSQL,
                undoIOCName: scheme.undoIOCName,
                undoUrl: scheme.undoUrl,

                deleteType: scheme.deleteType,
                deleteDbCode: scheme.deleteDbCode,
                deleteDbSQL: scheme.deleteDbSQL,
                deleteIOCName: scheme.deleteIOCName,
                deleteUrl: scheme.deleteUrl,


                deleteDraftType: scheme.deleteDraftType,
                deleteDraftDbCode: scheme.deleteDraftDbCode,
                deleteDraftDbSQL: scheme.deleteDraftDbSQL,
                deleteDraftIOCName: scheme.deleteDraftIOCName,
                deleteDraftUrl: scheme.deleteDraftUrl
            }
            this.$refs.shcemeinfo.setForm(baseinfo)
            this.$refs.bflow.setData(scheme.wfData)
        }
    }
}
</script>